<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hyperledger Fabric 资产管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981',
                        accent: '#8b5cf6',
                        dark: '#1e293b',
                        light: '#f8fafc'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .btn-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-dark">
    <div class="min-h-screen flex flex-col">
        <!-- 导航栏 -->
        <header class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300">
            <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <i class="fa fa-cubes text-primary text-2xl"></i>
                    <h1 class="text-xl md:text-2xl font-bold text-dark">资产链管理系统</h1>
                </div>
                <nav class="hidden md:flex items-center space-x-6">
                    <a href="#create" class="text-gray-600 hover:text-primary transition-colors duration-300">
                        <i class="fa fa-plus-circle mr-1"></i>创建资产
                    </a>
                    <a href="#query" class="text-gray-600 hover:text-primary transition-colors duration-300">
                        <i class="fa fa-search mr-1"></i>查询资产
                    </a>
                    <a href="#transfer" class="text-gray-600 hover:text-primary transition-colors duration-300">
                        <i class="fa fa-exchange mr-1"></i>转移资产
                    </a>
                    <a href="#history" class="text-gray-600 hover:text-primary transition-colors duration-300">
                        <i class="fa fa-history mr-1"></i>交易历史
                    </a>
                </nav>
                <button class="md:hidden text-gray-600 focus:outline-none" id="menuToggle">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
            <!-- 移动端菜单 -->
            <div class="md:hidden hidden bg-white border-t" id="mobileMenu">
                <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                    <a href="#create" class="text-gray-600 hover:text-primary py-2 transition-colors duration-300">
                        <i class="fa fa-plus-circle mr-1"></i>创建资产
                    
                    </a>
                    <a href="#query" class="text-gray-600 hover:text-primary py-2 transition-colors duration-300">
                        <i class="fa fa-search mr-1"></i>查询资产
                    </a>
                    <a href="#transfer" class="text-gray-600 hover:text-primary py-2 transition-colors duration-300">
                        <i class="fa fa-exchange mr-1"></i>转移资产
                    </a>
                    <a href="#history" class="text-gray-600 hover:text-primary py-2 transition-colors duration-300">
                        <i class="fa fa-history mr-1"></i>交易历史
                    </a>
                </div>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="flex-grow container mx-auto px-4 py-8">
            <!-- 状态面板 -->
            <div class="mb-8 bg-white rounded-lg p-4 shadow-md transform transition-all duration-300 hover:shadow-lg">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="mb-4 md:mb-0">
                        <h2 class="text-lg font-semibold text-gray-700">当前连接状态</h2>
                        <div class="flex items-center mt-1">
                            <span class="inline-block w-2 h-2 rounded-full bg-red-500 mr-2" id="connectionStatus"></span>
                            <span class="text-sm text-gray-600" id="connectionText">未连接到Fabric网络</span>
                        </div>
                    </div>
                    <div class="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-4">
                        <button id="connectBtn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md flex items-center btn-hover">
                            <i class="fa fa-plug mr-2"></i>连接网络
                        </button>
                        <button id="resetBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-md flex items-center btn-hover">
                            <i class="fa fa-refresh mr-2"></i>重置
                        </button>
                    </div>
                </div>
            </div>

            <!-- 功能卡片组 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 创建资产卡片 -->
                <div id="create" class="bg-white rounded-xl overflow-hidden shadow-md transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
                    <div class="bg-primary p-4 text-white">
                        <h2 class="text-lg font-bold flex items-center">
                            <i class="fa fa-plus-circle mr-2"></i>创建资产
                        </h2>
                    </div>
                    <div class="p-6">
                        <form id="createForm" class="space-y-4">
                            <div>
                                <label for="createId" class="block text-sm font-medium text-gray-700 mb-1">资产ID</label>
                                <input type="text" id="createId" name="createId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-300" placeholder="输入资产ID" required>
                            </div>
                            <div>
                                <label for="createOwner" class="block text-sm font-medium text-gray-700 mb-1">所有者</label>
                                <input type="text" id="createOwner" name="createOwner" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-300" placeholder="输入所有者" required>
                            </div>
                            <div>
                                <label for="createName" class="block text-sm font-medium text-gray-700 mb-1">资产名称</label>
                                <input type="text" id="createName" name="createName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-300" placeholder="输入资产名称" required>
                            </div>
                            <div>
                                <label for="createInfo" class="block text-sm font-medium text-gray-700 mb-1">资产信息</label>
                                <textarea id="createInfo" name="createInfo" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-300" placeholder="输入资产描述信息"></textarea>
                            </div>
                            <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-md flex items-center justify-center btn-hover">
                                <i class="fa fa-save mr-2"></i>提交创建
                            </button>
                        </form>
                        <div id="createResult" class="mt-4 hidden">
                            <div class="p-3 rounded-md bg-gray-100">
                                <h3 class="font-medium text-gray-800 mb-2">操作结果</h3>
                                <pre id="createOutput" class="text-sm text-gray-700 overflow-x-auto"></pre>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 查询资产卡片 -->
                <div id="query" class="bg-white rounded-xl overflow-hidden shadow-md transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
                    <div class="bg-secondary p-4 text-white">
                        <h2 class="text-lg font-bold flex items-center">
                            <i class="fa fa-search mr-2"></i>查询资产
                        </h2>
                    </div>
                    <div class="p-6">
                        <form id="queryForm" class="space-y-4">
                            <div>
                                <label for="queryId" class="block text-sm font-medium text-gray-700 mb-1">资产ID</label>
                                <input type="text" id="queryId" name="queryId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-secondary/50 focus:border-secondary transition-colors duration-300" placeholder="输入要查询的资产ID" required>
                            </div>
                            <button type="submit" class="w-full bg-secondary hover:bg-secondary/90 text-white py-2 px-4 rounded-md flex items-center justify-center btn-hover">
                                <i class="fa fa-search mr-2"></i>查询资产
                            </button>
                        </form>
                        <div id="queryResult" class="mt-4 hidden">
                            <div class="p-3 rounded-md bg-gray-100">
                                <h3 class="font-medium text-gray-800 mb-2">查询结果</h3>
                                <div id="queryOutput" class="text-sm text-gray-700">
                                    <div class="grid grid-cols-2 gap-2 mb-2">
                                        <div class="font-medium">资产ID:</div>
                                        <div id="queryIdValue">-</div>
                                    </div>
                                    <div class="grid grid-cols-2 gap-2 mb-2">
                                        <div class="font-medium">所有者:</div>
                                        <div id="queryOwnerValue">-</div>
                                    </div>
                                    <div class="grid grid-cols-2 gap-2 mb-2">
                                        <div class="font-medium">资产名称:</div>
                                        <div id="queryNameValue">-</div>
                                    </div>
                                    <div class="grid grid-cols-2 gap-2">
                                        <div class="font-medium">资产信息:</div>
                                        <div id="queryInfoValue">-</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 转移资产卡片 -->
                <div id="transfer" class="bg-white rounded-xl overflow-hidden shadow-md transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
                    <div class="bg-accent p-4 text-white">
                        <h2 class="text-lg font-bold flex items-center">
                            <i class="fa fa-exchange mr-2"></i>转移资产
                        </h2>
                    </div>
                    <div class="p-6">
                        <form id="transferForm" class="space-y-4">
                            <div>
                                <label for="transferId" class="block text-sm font-medium text-gray-700 mb-1">资产ID</label>
                                <input type="text" id="transferId" name="transferId" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent/50 focus:border-accent transition-colors duration-300" placeholder="输入要转移的资产ID" required>
                            </div>
                            <div>
                                <label for="transferOwner" class="block text-sm font-medium text-gray-700 mb-1">新所有者</label>
                                <input type="text" id="transferOwner" name="transferOwner" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-accent/50 focus:border-accent transition-colors duration-300" placeholder="输入新所有者" required>
                            </div>
                            <button type="submit" class="w-full bg-accent hover:bg-accent/90 text-white py-2 px-4 rounded-md flex items-center justify-center btn-hover">
                                <i class="fa fa-exchange mr-2"></i>转移资产
                            </button>
                        </form>
                        <div id="transferResult" class="mt-4 hidden">
                            <div class="p-3 rounded-md bg-gray-100">
                                <h3 class="font-medium text-gray-800 mb-2">操作结果</h3>
                                <pre id="transferOutput" class="text-sm text-gray-700 overflow-x-auto"></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 交易历史卡片 -->
            <div id="history" class="mt-8 bg-white rounded-xl overflow-hidden shadow-md transform transition-all duration-300 hover:shadow-xl">
                <div class="bg-dark p-4 text-white">
                    <h2 class="text-lg font-bold flex items-center">
                        <i class="fa fa-history mr-2"></i>交易历史
                    </h2>
                </div>
                <div class="p-6">
                    <div class="flex justify-between items-center mb-4">
                        <div class="text-sm text-gray-600">
                            显示最近 <span id="historyCount">0</span> 条交易记录
                        </div>
                        <button id="refreshHistoryBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-md flex items-center btn-hover">
                            <i class="fa fa-refresh mr-2"></i>刷新
                        </button>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full bg-white rounded-lg">
                            <thead>
                                <tr class="bg-gray-100 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    <th class="px-4 py-3 rounded-tl-lg">交易ID</th>
                                    <th class="px-4 py-3">资产ID</th>
                                    <th class="px-4 py-3">操作类型</th>
                                    <th class="px-4 py-3">所有者</th>
                                    <th class="px-4 py-3">时间戳</th>
                                    <th class="px-4 py-3 rounded-tr-lg">状态</th>
                                </tr>
                            </thead>
                            <tbody id="historyTableBody" class="divide-y divide-gray-200">
                                <!-- 交易历史记录将动态添加到这里 -->
                                <tr>
                                    <td colspan="6" class="px-4 py-8 text-center text-gray-500">
                                        <i class="fa fa-history text-3xl mb-2 block"></i>
                                        <p>暂无交易记录</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="bg-white border-t border-gray-200 py-6">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="mb-4 md:mb-0">
                        <div class="flex items-center space-x-2">
                            <i class="fa fa-cubes text-primary text-xl"></i>
                            <span class="font-semibold text-gray-800">资产链管理系统</span>
                        </div>
                        <p class="text-sm text-gray-600 mt-1">基于 Hyperledger Fabric 的资产数字化解决方案</p>
                    </div>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">
                            <i class="fa fa-document text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">
                            <i class="fa fa-question-circle text-xl"></i>
                        </a>
                    </div>
                </div>
                <div class="mt-6 pt-6 border-t border-gray-200 text-center text-sm text-gray-500">
                    <p>© 2025 资产链管理系统. 保留所有权利.</p>
                </div>
            </div>
        </footer>

        <!-- 加载中模态框 -->
        <div id="loadingModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
                <div class="flex flex-col items-center">
                    <div class="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mb-4"></div>
                    <h3 class="text-lg font-medium text-gray-800 mb-2" id="loadingText">处理中...</h3>
                    <p class="text-sm text-gray-600 text-center" id="loadingDetails">请稍候，系统正在处理您的请求</p>
                </div>
            </div>
        </div>

        <!-- 通知组件 -->
        <div id="notification" class="fixed top-4 right-4 max-w-sm w-full transform translate-x-full transition-transform duration-300 ease-in-out z-50">
            <div id="notificationContent" class="bg-white rounded-lg shadow-lg p-4 flex items-start">
                <div id="notificationIcon" class="mr-3 text-primary">
                    <i class="fa fa-info-circle text-xl"></i>
                </div>
                <div class="flex-1">
                    <h3 id="notificationTitle" class="font-medium text-gray-800">通知标题</h3>
                    <p id="notificationMessage" class="text-sm text-gray-600 mt-1">通知内容将显示在这里...</p>
                </div>
                <button id="closeNotification" class="text-gray-400 hover:text-gray-600 ml-2">
                    <i class="fa fa-times"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        // 模拟Fabric网络API调用
        class FabricAPI {
            constructor() {
                this.connected = false;
                this.assets = {};
                this.transactions = [];
                this.nextTxId = 1;
            }

            // 连接到Fabric网络
            connect() {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        this.connected = true;
                        resolve({ success: true, message: "成功连接到Fabric网络" });
                    }, 1500);
                });
            }

            // 创建资产
            createAsset(id, owner, name, info) {
                return new Promise((resolve, reject) => {
                    if (!this.connected) {
                        reject({ success: false, error: "未连接到Fabric网络" });
                        return;
                    }

                    if (this.assets[id]) {
                        reject({ success: false, error: `资产ID ${id} 已存在` });
                        return;
                    }

                    setTimeout(() => {
                        const asset = { id, owner, name, info };
                        this.assets[id] = asset;
                        
                        // 记录交易
                        this.recordTransaction(id, "CREATE", owner);
                        
                        resolve({ success: true, data: asset, txId: `tx-${this.nextTxId - 1}` });
                    }, 1000);
                });
            }

            // 查询资产
            queryAsset(id) {
                return new Promise((resolve, reject) => {
                    if (!this.connected) {
                        reject({ success: false, error: "未连接到Fabric网络" });
                        return;
                    }

                    setTimeout(() => {
                        const asset = this.assets[id];
                        if (!asset) {
                            reject({ success: false, error: `资产ID ${id} 不存在` });
                            return;
                        }
                        
                        // 记录交易
                        this.recordTransaction(id, "QUERY", asset.owner);
                        
                        resolve({ success: true, data: asset });
                    }, 800);
                });
            }

            // 转移资产
            transferAsset(id, newOwner) {
                return new Promise((resolve, reject) => {
                    if (!this.connected) {
                        reject({ success: false, error: "未连接到Fabric网络" });
                        return;
                    }

                    setTimeout(() => {
                        const asset = this.assets[id];
                        if (!asset) {
                            reject({ success: false, error: `资产ID ${id} 不存在` });
                            return;
                        }
                        
                        const oldOwner = asset.owner;
                        asset.owner = newOwner;
                        
                        // 记录交易
                        this.recordTransaction(id, "TRANSFER", newOwner, oldOwner);
                        
                        resolve({ success: true, data: asset, txId: `tx-${this.nextTxId - 1}` });
                    }, 1200);
                });
            }

            // 获取交易历史
            getTransactionHistory() {
                return new Promise((resolve, reject) => {
                    if (!this.connected) {
                        reject({ success: false, error: "未连接到Fabric网络" });
                        return;
                    }

                    setTimeout(() => {
                        // 返回最近的10条交易记录，按时间倒序
                        const recentTransactions = [...this.transactions].reverse().slice(0, 10);
                        resolve({ success: true, data: recentTransactions });
                    }, 1000);
                });
            }

            // 记录交易
            recordTransaction(assetId, type, owner, oldOwner = null) {
                const txId = `tx-${this.nextTxId++}`;
                const timestamp = new Date().toISOString();
                
                let details = "";
                if (type === "TRANSFER") {
                    details = `从 ${oldOwner} 转移到 ${owner}`;
                } else if (type === "CREATE") {
                    details = `创建资产`;
                } else if (type === "QUERY") {
                    details = `查询资产`;
                }
                
                this.transactions.push({
                    txId,
                    assetId,
                    type,
                    owner,
                    timestamp,
                    details
                });
            }
        }

        // 应用状态和初始化
        document.addEventListener('DOMContentLoaded', function() {
            const fabricAPI = new FabricAPI();
            const connectionStatus = document.getElementById('connectionStatus');
            const connectionText = document.getElementById('connectionText');
            const connectBtn = document.getElementById('connectBtn');
            const resetBtn = document.getElementById('resetBtn');
            const loadingModal = document.getElementById('loadingModal');
            const loadingText = document.getElementById('loadingText');
            const loadingDetails = document.getElementById('loadingDetails');
            const notification = document.getElementById('notification');
            const notificationTitle = document.getElementById('notificationTitle');
            const notificationMessage = document.getElementById('notificationMessage');
            const notificationIcon = document.getElementById('notificationIcon');
            const closeNotification = document.getElementById('closeNotification');
            const historyCount = document.getElementById('historyCount');
            const historyTableBody = document.getElementById('historyTableBody');
            const menuToggle = document.getElementById('menuToggle');
            const mobileMenu = document.getElementById('mobileMenu');

            // 移动菜单切换
            menuToggle.addEventListener('click', function() {
                mobileMenu.classList.toggle('hidden');
            });

            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    const targetElement = document.querySelector(targetId);
                    
                    if (targetElement) {
                        window.scrollTo({
                            top: targetElement.offsetTop - 80,
                            behavior: 'smooth'
                        });
                        
                        // 关闭移动菜单
                        if (!mobileMenu.classList.contains('hidden')) {
                            mobileMenu.classList.add('hidden');
                        }
                    }
                });
            });

            // 连接到Fabric网络
            connectBtn.addEventListener('click', async function() {
                if (fabricAPI.connected) {
                    showNotification('已连接', '您已经连接到Fabric网络', 'info');
                    return;
                }
                
                showLoading('连接中', '正在连接到Hyperledger Fabric网络...');
                
                try {
                    const result = await fabricAPI.connect();
                    updateConnectionStatus(true);
                    hideLoading();
                    showNotification('成功', result.message, 'success');
                    
                    // 连接成功后自动刷新交易历史
                    refreshHistory();
                } catch (error) {
                    hideLoading();
                    showNotification('错误', error.error || '连接失败', 'error');
                }
            });

            // 重置应用
            resetBtn.addEventListener('click', function() {
                document.querySelectorAll('form').forEach(form => form.reset());
                document.querySelectorAll('[id$="Result"]').forEach(result => result.classList.add('hidden'));
                updateConnectionStatus(false);
            });

            // 创建资产表单提交
            document.getElementById('createForm').addEventListener('submit', async function(e) {
                e.preventDefault();
                
                const id = document.getElementById('createId').value;
                const owner = document.getElementById('createOwner').value;
                const name = document.getElementById('createName').value;
                const info = document.getElementById('createInfo').value;
                
                showLoading('创建资产', '正在将资产信息写入区块链...');
                
                try {
                    const result = await fabricAPI.createAsset(id, owner, name, info);
                    hideLoading();
                    
                    document.getElementById('createOutput').textContent = JSON.stringify(result.data, null, 2);
                    document.getElementById('createResult').classList.remove('hidden');
                    
                    showNotification('成功', `资产 ${id} 创建成功`, 'success');
                    
                    // 刷新交易历史
                    refreshHistory();
                } catch (error) {
                    hideLoading();
                    showNotification('错误', error.error || '创建资产失败', 'error');
                }
            });

            // 查询资产表单提交
            document.getElementById('queryForm').addEventListener('submit', async function(e) {
                e.preventDefault();
                
                const id = document.getElementById('queryId').value;
                
                showLoading('查询资产', '正在从区块链查询资产信息...');
                
                try {
                    const result = await fabricAPI.queryAsset(id);
                    hideLoading();
                    
                    document.getElementById('queryIdValue').textContent = result.data.id;
                    document.getElementById('queryOwnerValue').textContent = result.data.owner;
                    document.getElementById('queryNameValue').textContent = result.data.name;
                    document.getElementById('queryInfoValue').textContent = result.data.info;
                    document.getElementById('queryResult').classList.remove('hidden');
                    
                    showNotification('成功', `资产 ${id} 查询成功`, 'success');
                } catch (error) {
                    hideLoading();
                    showNotification('错误', error.error || '查询资产失败', 'error');
                }
            });

            // 转移资产表单提交
            document.getElementById('transferForm').addEventListener('submit', async function(e) {
                e.preventDefault();
                
                const id = document.getElementById('transferId').value;
                const newOwner = document.getElementById('transferOwner').value;
                
                showLoading('转移资产', '正在处理资产转移...');
                
                try {
                    const result = await fabricAPI.transferAsset(id, newOwner);
                    hideLoading();
                    
                    document.getElementById('transferOutput').textContent = JSON.stringify(result.data, null, 2);
                    document.getElementById('transferResult').classList.remove('hidden');
                    
                    showNotification('成功', `资产 ${id} 已转移至 ${newOwner}`, 'success');
                    
                    // 刷新交易历史
                    refreshHistory();
                } catch (error) {
                    hideLoading();
                    showNotification('错误', error.error || '转移资产失败', 'error');
                }
            });

            // 刷新交易历史
            document.getElementById('refreshHistoryBtn').addEventListener('click', refreshHistory);

            // 关闭通知
            closeNotification.addEventListener('click', function() {
                notification.classList.remove('translate-x-0');
                notification.classList.add('translate-x-full');
            });

            // 更新连接状态
            function updateConnectionStatus(connected) {
                if (connected) {
                    connectionStatus.classList.remove('bg-red-500');
                    connectionStatus.classList.add('bg-green-500');
                    connectionText.textContent = '已连接到Fabric网络';
                    connectBtn.innerHTML = '<i class="fa fa-check mr-2"></i>已连接';
                    connectBtn.disabled = true;
                    connectBtn.classList.add('bg-gray-400', 'hover:bg-gray-400');
                    connectBtn.classList.remove('bg-primary', 'hover:bg-primary/90');
                } else {
                    connectionStatus.classList.remove('bg-green-500');
                    connectionStatus.classList.add('bg-red-500');
                    connectionText.textContent = '未连接到Fabric网络';
                    connectBtn.innerHTML = '<i class="fa fa-plug mr-2"></i>连接网络';
                    connectBtn.disabled = false;
                    connectBtn.classList.remove('bg-gray-400', 'hover:bg-gray-400');
                    connectBtn.classList.add('bg-primary', 'hover:bg-primary/90');
                }
            }

            // 显示加载中模态框
            function showLoading(text, details) {
                loadingText.textContent = text;
                loadingDetails.textContent = details;
                loadingModal.classList.remove('hidden');
            }

            // 隐藏加载中模态框
            function hideLoading() {
                loadingModal.classList.add('hidden');
            }

            // 显示通知
            function showNotification(title, message, type = 'info') {
                notificationTitle.textContent = title;
                notificationMessage.textContent = message;
                
                // 设置图标和颜色
                notificationIcon.className = 'mr-3';
                if (type === 'success') {
                    notificationIcon.classList.add('text-green-500');
                    notificationIcon.innerHTML = '<i class="fa fa-check-circle text-xl"></i>';
                } else if (type === 'error') {
                    notificationIcon.classList.add('text-red-500');
                    notificationIcon.innerHTML = '<i class="fa fa-exclamation-circle text-xl"></i>';
                } else if (type === 'warning') {
                    notificationIcon.classList.add('text-yellow-500');
                    notificationIcon.innerHTML = '<i class="fa fa-exclamation-triangle text-xl"></i>';
                } else {
                    notificationIcon.classList.add('text-primary');
                    notificationIcon.innerHTML = '<i class="fa fa-info-circle text-xl"></i>';
                }
                
                // 显示通知
                notification.classList.remove('translate-x-full');
                notification.classList.add('translate-x-0');
                
                // 3秒后自动关闭
                setTimeout(() => {
                    notification.classList.remove('translate-x-0');
                    notification.classList.add('translate-x-full');
                }, 5000);
            }

            // 刷新交易历史
            async function refreshHistory() {
                if (!fabricAPI.connected) {
                    showNotification('提示', '请先连接到Fabric网络', 'info');
                    return;
                }
                
                showLoading('加载中', '正在获取交易历史记录...');
                
                try {
                    const result = await fabricAPI.getTransactionHistory();
                    hideLoading();
                    
                    const transactions = result.data;
                    historyCount.textContent = transactions.length;
                    
                    if (transactions.length === 0) {
                        historyTableBody.innerHTML = `
                            <tr>
                                <td colspan="6" class="px-4 py-8 text-center text-gray-500">
                                    <i class="fa fa-history text-3xl mb-2 block"></i>
                                    <p>暂无交易记录</p>
                                </td>
                            </tr>
                        `;
                        return;
                    }
                    
                    historyTableBody.innerHTML = '';
                    
                    transactions.forEach(tx => {
                        const row = document.createElement('tr');
                        row.className = 'hover:bg-gray-50 transition-colors duration-200';
                        
                        // 格式化时间戳
                        const timestamp = new Date(tx.timestamp).toLocaleString();
                        
                        // 设置状态图标和颜色
                        let statusIcon = '<i class="fa fa-check-circle text-green-500"></i>';
                        let statusText = '成功';
                        
                        row.innerHTML = `
                            <td class="px-4 py-3">${tx.txId}</td>
                            <td class="px-4 py-3">${tx.assetId}</td>
                            <td class="px-4 py-3">
                                <span class="px-2 py-1 text-xs rounded-full ${getTypeClass(tx.type)}">
                                    ${tx.type}
                                </span>
                            </td>
                            <td class="px-4 py-3">${tx.owner}</td>
                            <td class="px-4 py-3">${timestamp}</td>
                            <td class="px-4 py-3">${statusIcon} ${statusText}</td>
                        `;
                        
                        historyTableBody.appendChild(row);
                    });
                    
                    showNotification('成功', '交易历史已更新', 'success');
                } catch (error) {
                    hideLoading();
                    showNotification('错误', error.error || '获取交易历史失败', 'error');
                }
            }
            
            // 根据交易类型获取CSS类
            function getTypeClass(type) {
                switch (type) {
                    case 'CREATE':
                        return 'bg-blue-100 text-blue-800';
                    case 'TRANSFER':
                        return 'bg-purple-100 text-purple-800';
                    case 'QUERY':
                        return 'bg-green-100 text-green-800';
                    default:
                        return 'bg-gray-100 text-gray-800';
                }
            }
        });
    </script>
</body>
</html>
    